
Ext.define('Sencha.controller.WordmakerController', {
    extend: 'Ext.app.Controller',
           
    config: {
        refs: {
           tabpanel: 'tabview',
           main: 'wordmaker',
           pickers: 'picker',
           //pickers: 'picker[cls=wordmakerpicker]',
           //inflectionText: 'container[id=inflectionTextContainer]',
           //sourceInflection: 'container[cls=wordmakersrcinflection]'
           inflectionBox: 'container[cls=inflectionbox]',
           inflectionText: 'container[cls=inflectiontextholder]',
           wordmakerSpeakerButton: 'image[cls=wordmakerspeakerbutton]'        
        },
        
        control: {
           'pickers': {
                pick: 'onSlotChange',
                add: 'onSlotAdded'
            },
           
           'main': {
                initialize: 'onInit',
                //show: 'onShow',
                show: 'onShow',
                hide: 'onHide'
           },
           'wordmakerSpeakerButton': {
                tap: 'onSpeakerButtonTap'
           },
           'viewport': {
                orientationchange: 'handleOrientationChange' 
           }
        },
        
        // Properties
        inflectionBoxRef: null, // reference to container for inflection text, speaker icont etc.
        pickerRef: null, // reference to pickers
        // flag to trigger refresh/rebuild of pickers
        refresh: true,
        // These are used to store current picker slot selections
        conjugationType: null,
        stemId: null,
        subjectId: null,
        numberId: null,
        directionId: null,
        tenseId: null,
        objectId: null,
        // Store audioURL
        audioURL: null,
           
           
        // Constants
        subjectTable: ["I", "you (sg.)", "he", "she", "it", "we (inc.)", "we (exc.)", "we (inc. 2)", "we (exc. 2)", "you (pl.)", "you (two)", "they", "those (two)", "he/she/it"],
        numberTable: ["singular", "plural"],
        directionTable: ["neutral", "away", "towards"],
        tenseTable: ["present", "future", "past", "past continuous", "past habitual", "iterative", "optative", "frustrative", "imperative", "negative imperative"],
        objectTable: ["me", "you (sg.)", "him", "her", "it", "us (exc.)", "us (inc.)", "us (two)", "you (pl.)", "you (two)", "them", "them (two)", "him/her/it"],
        // tab bar height
        tabBarHeight: 85,
        statusBarHeight: 20
    },
    
           onSlotDataUpdated: function() {
           console.log('slot DATA updated');
           },
           
    onSlotAdded: function(picker, slot) {
           console.log('added slot');
           console.log('slot.getTitle() = ' + slot.getTitle() );
        // if the stem slot has just been added, then update stem slot (and by default the rest too)
        if (picker.getInnerItems().length == 1 ) {
           console.log('it was the stem slot');
           this.updateStemSlot();  
        }
    },
      
    handleOrientationChange: function(){
        console.log('orentation change...');
           
        var pickerHeight = this.setPickerHeight();
           
        //this.getPickers().setHeight(pickerHeight);
        
        this.getMain().getAt(1).destroy();
           this.getMain().add({
                              // Pickers
                              xtype: 'picker',
                              modal: false,
                              toolbar: {
                              hidden: true
                              },
                              border: 0,
                              useTitles: true,
                              height: pickerHeight});
        // Can't just set height due to Sencha bug. Have to rebuild pickers with new height
          
        this.addStemSlot();
        this.updateStemSlot();
    },
           
    // onSpeakerButtonTap - plays inflection audio
    //
    onSpeakerButtonTap : function() {
        var fullAudioURL = Sencha.app.getPersistentFileStoreVar() + '/assets/' + this.getAudioURL(); 
           
        var my_media = new Media(
            fullAudioURL,
            // success callback
            function() {
                console.log("playAudio():Audio Success");
            },
            // error callback
            function(err) {
                console.log("playAudio():Audio Error: "+err);
                navigator.notification.alert(msg, null, 'Capture error');
            }
        );
            
        Sencha.app.mediaPtr=my_media;
        //my_media.release();
        Sencha.app.mediaPtr.play();
    },
           
           
    // Display selected inflection
    //
    showInflection: function() {
        var selectQuery = '';
        var sourceInflection = ''; 
        var targetInflection = '';
        var orthography = '';
        var currentObj = this;
        //console.log('subject=' + this.getSubjectId() + 'stem=' + this.getStemId() + 'direction=' + this.getDirectionId() + ' tense=' + this.getTenseId() );   
        
        // Make select query
        switch( this.getConjugationType() ) {
           // If an inflecting body parts conjugation
           case '0':
                selectQuery = "SELECT * FROM CONJUGATION WHERE stemId='" + this.getStemId() + "' AND subjectId='" + this.getSubjectId() + "' AND numberId='" + this.getNumberId() + "'"; 
                break;
           // If an intransitive verb conjugation
           case '1':
                selectQuery = "SELECT * FROM CONJUGATION WHERE stemId='" + this.getStemId() + "' AND subjectId='" + this.getSubjectId() + "' AND directionId='" + this.getDirectionId() + "' AND tenseId='" + this.getTenseId() + "'";  
                break;
           // If a transitive verb conjugation
           case '2':
                selectQuery = "SELECT * FROM CONJUGATION WHERE stemId='" + this.getStemId() + "' AND subjectId='" + this.getSubjectId() + "' AND objectId='" + this.getObjectId() + "' AND directionId='" + this.getDirectionId() + "' AND tenseId='" + this.getTenseId() + "'"; 
                break;
           default:
                console.log('WordmakerController.showInflection(), default - failed switch');
           return;
        }
        
        if (selectQuery != '') {
           var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 300000);
           db.transaction(
                function(tx) {
                    tx.executeSql(
                        selectQuery, 
                        [], 
                        function (tx, results) {
                            // if we found a match
                            if ( results.rows.length==1 ) {
                                  
                                sourceInflection = results.rows.item(0).sourceInflection;
                                targetInflection = results.rows.item(0).targetInflection;
                                orthography = '(' + results.rows.item(0).orthography + ')';
                                currentObj.setAudioURL( results.rows.item(0).audioURL );
                            } else {
                                sourceInflection = "";
                                targetInflection = "";
                                orthography = "";
                                currentObj.setAudioURL("");
                            }
                            // display it
                            currentObj.getInflectionText().setHtml('<div class=sourceinflection>'+ sourceInflection +'</div>' + '<div class=targetinflection>'+ targetInflection + ' ' + orthography +'</div>');
                            // set audio icon visibility
                            if ( currentObj.getAudioURL() ) {
                                currentObj.getWordmakerSpeakerButton().setHidden(false);
                            } else {
                                currentObj.getWordmakerSpeakerButton().setHidden(true);
                            }
                        }
                    );
                }
          );
        }
    },
    
           
    // Populate and display the Tense slot
    //
    updateTenseSlot: function() {
        console.log('Update tense slot..');
        // Create tense slot
        var tenseSlot = {
           name : 'tense',
           title : 'Tense',
           data : []
        };
           
        // Populate it using the conjugation table
        var conjugationStore = Ext.getStore("Conjugations");
        var selectQuery = '';
        
        var tenseTbl = this.getTenseTable();
        var stemId = this.getStemId();
        var subjectId = this.getSubjectId();
        var objectId = this.getObjectId();
        var directionId = this.getDirectionId();
        var currentObj = this;
           
        // Sort conjugation table depending on if this is intransitive or transitive
        switch( this.getConjugationType() ) {
           // If an intransitive verb conjugation (ie. stem, subject, direction and tense)
           case "1":
                selectQuery = "SELECT * FROM CONJUGATION WHERE stemId='" + stemId + "' AND subjectId='" + subjectId + "' AND directionId='" + directionId + "' GROUP BY tenseId"; 
                break;
           // If a transitive verb conjugation (ie. stem, subject, object, direction and tense)
           case "2":
                selectQuery = "SELECT * FROM CONJUGATION WHERE stemId='" + stemId + "' AND subjectId='" + subjectId + "' AND objectId='" + objectId + "' AND directionId='" + directionId + "' GROUP BY tenseId";
                break;
           default:
                console.log('Error: WordmakerController.updateTenseSlot(), default - failed switch');
                return;
        } 
        
        if (selectQuery != '') {
           console.log('in if select query');
            var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 300000);
            db.transaction(
                function(tx) {
                    tx.executeSql(
                        selectQuery, 
                        [], 
                        function (tx, results) {
                                  console.log('in function success');
                            var len = results.rows.length;
                                  console.log('len = ' + len);
                            for (var i=0; i<len; i++){
                                var curId = results.rows.item(i).tenseId;
                                tenseSlot.data[i] = {
                                    text : tenseTbl[curId-1], // get corresponding text (id's start at 1)
                                    value : curId
                                };
                            }
                                  console.log('in if success');
                            // If intransitive
                            if ( currentObj.getConjugationType()==1 ) {
                                // Delete tense slot if it already exists (direction slot always at index 3)
                                  console.log('intransitive');
                                while (currentObj.getPickers().getInnerItems().length > 3) {
                                    currentObj.getPickers().removeAt(4);
                                }
                            }
                            // if transitive
                            else {
                                  console.log('transitive');
                                while (currentObj.getPickers().getInnerItems().length > 4) {
                                    currentObj.getPickers().removeAt(5);
                                }
                            }
                                console.log('add tense slot');
                            // Add Tense slot
                            currentObj.getPickers().add(tenseSlot);
                                      
                            // Remember this picker selection
                            currentObj.setTenseId( currentObj.getPickers().getValue()['tense'] );
                                      
                            // No more pickers to update so display inflection
                            currentObj.showInflection();
                        }
                    );
                }
            );
        }
    },
           
    
    // Populate and display the Direction slot
    //
    updateDirectionSlot: function() {
        // Create direction slot
        var directionSlot = {
           name : 'direction',
           title : 'Direction',
           data : []
        };
  
        // Populate it using the conjugation table
        var conjugationStore = Ext.getStore("Conjugations");
        var selectQuery = '';
        
        var directionTbl = this.getDirectionTable();
        var stemId = this.getStemId();
        var subjectId = this.getSubjectId();
        var objectId = this.getObjectId();
        var currentObj = this;
           
        
        // Sort conjugation table depending on if this is intransitive or transitive
        switch( this.getConjugationType() ) {
           // If an intransitive verb conjugation (ie. stem, subject, direction and tense)
           case "1":
                //conjugationStore.sort([{property:'subjectID',direction:'ASC'},{property:'directionId',direction:'ASC'}]);
                selectQuery = "SELECT * FROM CONJUGATION WHERE stemId='" + stemId + "' AND subjectId='" + subjectId + "' GROUP BY directionId"; 
           
                break;
           // If a transitive verb conjugation (ie. stem, subject, object, direction and tense)
           case "2":
                //conjugationStore.sort([{property:'subjectID',direction:'ASC'},{property:'objectId',direction:'ASC'},{property:'directionId',direction:'ASC'}]);
                selectQuery = "SELECT * FROM CONJUGATION WHERE stemId='" + stemId + "' AND subjectId='" + subjectId + "' AND objectId='" + objectId + "' GROUP BY directionId";
                break;
           default:
                console.log('Error: WordmakerController.updateDirectionSlot(), default - failed switch');
                return;
        } 
         
        
        if (selectQuery != '') {
           var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 300000);
           db.transaction(
                function(tx) {
                    tx.executeSql(
                        selectQuery, 
                        [], 
                        function (tx, results) {
                            var len = results.rows.length;
                            for (var i=0; i<len; i++){
                                var curId = results.rows.item(i).directionId;
                                directionSlot.data[i] = {
                                    text : directionTbl[curId-1], // get corresponding text (id's start at 1)
                                    value : curId
                                };
                            }
                             
                            // If intransitive
                            if ( currentObj.getConjugationType()==1 ) {
                                // Delete direction slot if it already exists (direction slot always at index 2)
                                while (currentObj.getPickers().getInnerItems().length > 2) {
                                  currentObj.getPickers().removeAt(3);
                                }
                                // !!! Need to delete other slots too if it was a differenct conjugatio type
                            }
                            // if transitive
                            else {
                                // Delete direction slot if it already exists (direction slot always at index 2)
                                while (currentObj.getPickers().getInnerItems().length > 3) {
                                  currentObj.getPickers().removeAt(4);
                                }
                            }
                                  
                            // Add slot
                            currentObj.getPickers().add(directionSlot);
                                  
                            // Remember this picker selection
                            currentObj.setDirectionId( currentObj.getPickers().getValue()['direction'] );
                                  
                            currentObj.updateTenseSlot();
                        },
                        function(err) {
                            console.log("Error processing SQL: " + err.code);
                        }
                    );
                }
            );
        }
    },

           
    // Update and display the Object slot
    //
    updateObjectSlot: function() {
        console.log('Update object slot..');
        // Create object slot
        var objectSlot = {
           name : 'object',
           title : 'Object',
           data : []
        };
        // Populate it using the conjugation table
        var conjugationStore = Ext.getStore("Conjugations");
        
           
        conjugationStore.sort([{property:'subjectId',direction:'ASC'},{property:'objectId',direction:'ASC'}]);
           
        var storeFilteredLength = conjugationStore.getCount();
        var lastId = -1; // make it less than 0 to start with so always passes if first time
        var j=0; // count used to add new items to slot 
        console.log('conjugationStore.getCount() = ' + conjugationStore.getCount() );
        for (var i=0; i<storeFilteredLength; i++) {
           var curId = conjugationStore.getAt(i).get('objectId');
           console.log('curId = ' + curId + ' lastId = ' + lastId);
           // if the record in the conjugation table matches the selected subject (all already match stem)
           if ( conjugationStore.getAt(i).get('subjectId')==this.getSubjectId() ) {
                // If this is a new stemId ie. store is sorted by stemId, check that this id > last id
                if ( curId>lastId ) {
                    objectSlot.data[j] = {
                        text : this.getObjectTable()[curId-1], // get corresponding text (id's start at 1)
                        value : curId
                    };
           
                    lastId = curId;
                    j++;
                }
           }
        }
           
        console.log('this.getPickers().getInnerItems().length = ' + this.getPickers().getInnerItems().length);
        // Delete object slot if it already exists (object slot always at index 2)
        while (this.getPickers().getInnerItems().length > 2) {
           console.log('REMOVE object picker at ' + this.getPickers().getInnerItems().length);
           this.getPickers().removeAt(3);
        }
           
        // !!! Need to delete other slots too if it was a differenct conjugatio type
           
        // Add Number slot always at index 2
        this.getPickers().add(objectSlot);
           
        // Remember this picker selection
        this.setObjectId( this.getPickers().getValue()['object'] );
           
        this.updateDirectionSlot();
    },      
           
           
    // Populate and display the Number slot
    //
    updateNumberSlot: function() {
        // Create Number slot
        var numberSlot = {
           name : 'number',
           title : 'Number',
           data : []
        };
        
        var numberTbl = this.getNumberTable();
        var stemId = this.getStemId();
        var subjectId = this.getSubjectId();
        var currentObj = this;
           
        var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 300000);
        db.transaction(
            function(tx) {
                tx.executeSql(
                    "SELECT * FROM CONJUGATION WHERE stemId='" + stemId + "' AND subjectId='" + subjectId + "' GROUP BY numberId", 
                    [], 
                    function (tx, results) {
                        var len = results.rows.length;
                        for (var i=0; i<len; i++){
                            var curId = results.rows.item(i).numberId;
                            numberSlot.data[i] = {
                              text : numberTbl[curId-1], // get corresponding text (id's start at 1)
                              value : curId
                            };
                        }
                          
                        // Delete number slot if it already exists (number slot always at index 2)
                        while (currentObj.getPickers().getInnerItems().length > 2) {
                            currentObj.getPickers().removeAt(3);
                        }
                          
                        // !!! Need to delete other slots too if it was a differenct conjugatio type
                          
                        // Add Number slot always at index 2
                        currentObj.getPickers().add(numberSlot);
                          
                        // Remember this picker selection
                        currentObj.setNumberId( currentObj.getPickers().getValue()['number'] );
                          
                        // No more pickers to update so display inflection
                        currentObj.showInflection();
                    },
                    function (err) {
                        console.log("Error processing SQL 1: " + err.code);      
                    }
                );
            },
            function(err) {
                console.log("Error processing SQL: " + err.code);
                //alert("Error processing SQL 1: "+err.code);
            }
        );
    },

    
    // handle subject slot change. This is a branch point - from here we could either be dealing with
    // an inflecting body part (number picker required), intransitive verb (direction slot required
    // plus tense slot) or a transitive verb (object picker required plus direction and tense pickers)
    //
    onSubjectSlotChange: function() {     
        // Remember this picker selection
        this.setSubjectId( this.getPickers().getValue()['subject'] );
           
        console.log('this.getConjugationType()=' + this.getConjugationType());
        // branch depending on conjugation type
        switch( this.getConjugationType() ) {
           // If an inflecting body parts conjugation
           case "0":
                this.updateNumberSlot();
                break;
           // If an intransitive verb conjugation
           case "1":
                this.updateDirectionSlot();
                break;
           // If a transitive verb conjugation
           case "2":
                this.updateObjectSlot();
                break;
           default:
                console.log('default - failed switch');
                return;
        }   
    },
    
           
    // Populate and display the Subject slot
    //
    updateSubjectSlot: function() {
        // Create Subject slot
        var subjectSlot = {
           name : 'subject',
           title : 'Subject',
           data : []
        };
        var subjectTbl = this.getSubjectTable();
           //console.log('subjectTbl item=' + subjectTbl[3] );
        var stemId = this.getStemId();
        var currentObj = this;
           
        var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 300000);
        db.transaction(
            function(tx) {
                tx.executeSql(
                    "SELECT * FROM CONJUGATION WHERE stemId='" + stemId + "' GROUP BY subjectId", 
                    [], 
                    function (tx, results) {
                        var len = results.rows.length;
                        for (var i=0; i<len; i++){
                            var curId = results.rows.item(i).subjectId;
                            subjectSlot.data[i] = {
                              text : subjectTbl[curId-1], // get corresponding text (id's start at 1)
                              value : curId
                            };
                        }
                        // Delete subject slot if it already exists (subject slot always at index 0)
                        if (currentObj.getPickers().getInnerItems().length > 1) {
                            currentObj.getPickers().removeAt(0);
                        }
                              
                        // Add subject slot always at index 0
                        currentObj.getPickers().insert(0, subjectSlot); 
                              
                        currentObj.onSubjectSlotChange();
                        
                    },
                    function () {
                        console.log("Error processing SQL 1: " + err.code);      
                    }
                );
            },
            function(err) {
                console.log("Error processing SQL 1: " + err.code);
                //alert("Error processing SQL 1: "+err.code);
            }
        );
    },
    
    // Add stem slot
    //
    addStemSlot: function() {
        var stemSlot = {
           name : 'stem',
           title: 'Stem',
           valueField: 'id',
           displayField: 'stem',
           store: 'Stems'
        };
           
        // Add Stem slot
        this.getPickers().add(stemSlot);
        
        console.log('selected stem item (will be null if not setup yet) = ' + this.getPickers().getValue()['stem']);
        //this.getPickers().setValue({stem:'3'});
    },
           
           
    // Update stem - store selection 
    //
    updateStemSlot: function() {
           console.log('in updatestemslot() ');
        var selectedStem = this.getPickers().getValue()['stem'];
        
        var conjugationStore = Ext.getStore("Conjugations");
        var stemStore = Ext.getStore("Stems");
        
        
        //   newSlot.setValue({id: 3});
         
           
        // if at startup, we need to manually set selected stem
        // MDM : !this code is not working yet!
        // actually, if there's no selected stem we can infer the stem slot hasn't been created yet?
        if (selectedStem == null) {
           console.log('must be at startup');
           console.log('THIS IS THE CODE THAT WASNT WORKING, MAYBE IT IS NOW?');
           //this.getPickers().setValue(0)['stem'];
           
           //this.getPickers().setValue({stem: '1'});
           //selectedStem = this.getPickers().getValue()['stem'];
           var me = this;
           setTimeout(
                function() {
                    console.log('RECURSIVE CALL WITH TIMEOUT');
                    me.updateStemSlot();
                }, 
                200
            );
            return;
        }
           console.log('in udateStemSlot, passed if...');
        /*
        // filter the Conjugation store for better performance
        var stemFilter = new Ext.util.Filter({
            filterFn: function(item) {
                if (item.get("stemId")==selectedStem) {
                    return true;
                }
            }
        });
        conjugationStore.clearFilter(); // clear filter out
        conjugationStore.filter(stemFilter); // filter
        */
           
        // remember current stem selection
        this.setStemId(selectedStem); 
        // remember conjugation type ie. body part, intransitive, transitive
        var record = stemStore.getById(selectedStem);
           console.log('selectedStem = ' + selectedStem);
        if ( record ) {
           console.log('type = ' + record.get('inflectionType') );
           this.setConjugationType( record.get('inflectionType') )
        }
        //console.log('conjugation type = ' + this.getConjugationType() );
           
        // Update other slots now
        this.updateSubjectSlot();       
    },
           
               
    // Handle slot changes
    // For some reason, passed in parameters as per Sencha API don't work
    //
    onSlotChange: function(selectedPicker, slots, selectedSlot, options ) {
        
        switch( selectedSlot.getName() ) {
           // if STEM slot changed
           case 'stem':
                console.log("call updateStemSlot()");
                this.updateStemSlot();
                break;
           // if SUBJECT slot changed
           case 'subject':
                console.log("Subject slot changed");
                this.onSubjectSlotChange();
                break;
           // If NUMBER slot changed
           case 'number':
                console.log('number slot changed');
                this.setNumberId( this.getPickers().getValue()['number'] );
                this.showInflection();
                break;
           // If DIRECTION slot changed
           case 'direction':
                console.log('direction slot changed');
                this.setDirectionId( this.getPickers().getValue()['direction'] );
                //this.showInflection();
                this.updateTenseSlot();
           break;
           // If TENSE slot changed
           case 'tense':
                console.log('tense slot changed');
                this.setTenseId( this.getPickers().getValue()['tense'] );
                this.showInflection();
                break;
           // If OBJECT slot changed
           case 'object':
                console.log('object slot changed');
                this.setObjectId( this.getPickers().getValue()['object'] );
                this.updateDirectionSlot();
           break;
           
           default:
                console.log('default - failed picker detection switch');
           return;
        }
    },

    // Sets the picker height taking into account screen orientation
    //
    setPickerHeight: function(inflectionboxHeightOveride) {
        var inflectionBoxHeight = inflectionboxHeightOveride;
        if ( !inflectionBoxHeight ) {
           inflectionBoxHeight = this.getInflectionBox().getHeight();
        }
           
        //this.updateStemSlot();
        // Get screen height (different depending on if landscape or portrait)   
        if ( Ext.Viewport.getOrientation()=='portrait' ) {
           var screenHeight = screen.height;
        } else {
           var screenHeight = screen.width;
        }
           
        var pickerHeight = screenHeight - this.getTabBarHeight() - inflectionBoxHeight - this.getStatusBarHeight();
        //this.getPickers().setHeight(pickerHeight);
        console.log ('pickerHeight = ' + pickerHeight );
        return pickerHeight;
    },
        
           
    onShow: function() {
        console.log('WordmakerController.onShow()');
           
        // Dynamically add inflection box (to display inflection) an pickers
        if ( this.getInflectionBoxRef() ) {
           console.log('we have an inflectionBoxRef!');
           this.getMain().add( this.getInflectionBoxRef() );
           this.getMain().add( this.getPickerRef() );
           
           // if doing this the first time then create picker slots
           if ( this.getMain().getAt(1).getInnerItems().length==0 ) {
                this.addStemSlot();
                // update stem slot is called from stem slot event handler
           } 
        } else {
           console.log('no inflectionBoxRef');
        }
        
        // if we've jumped here from a verb in the Dictionary Tab, set the stem to match 
        var tabJump = this.getTabpanel().getTabJump();
        if ( tabJump ) {
           this.getPickers().setValue({stem: tabJump});
           this.updateStemSlot();
           this.getTabpanel().setTabJump(null);
        }
    },
           
    onHide: function() {
        console.log('hhhide');
        // store them
        this.setInflectionBoxRef( this.getMain().getAt(0) );
        this.setPickerRef( this.getMain().getAt(1) );
           
        this.getMain().removeAll(false, true);
    },
           
    onInit: function() {
        console.log ('in WordmakerController.onInit()...');
          
        this.setInflectionBoxRef( {   
           // Inflection text and speaker icon
           xtype: "container",
           cls: "inflectionbox",
           layout:{
           type:'hbox',
           align:'left'
           },
           height: 60, // can't set this as a string ie '60px' because controller does calc. with this
           items: [
                {
                   // clickable speaker icon
                   xtype: 'image',
                   cls: 'wordmakerspeakerbutton',
                   html: '<div><img src="images/speaker.png" /></div>',
                   width: '33px',
                   height: '24px'
                   },
                   {
                   // source and target inflectdions plus orthography
                   cls: 'inflectiontextholder',
                   html: 'source and target inflections and orthography'
                }
            ]
           
        });
        
        var pickerHeight = this.setPickerHeight(60);
           console.log('pickerHeight = ' + pickerHeight);
        this.setPickerRef( {
            // Pickers
            xtype: 'picker',
            modal: false,
            toolbar: {
                hidden: true
            },
            border: 0,
            useTitles: true,
            height: pickerHeight
        });
           
        //this.getMain().add( this.getInflectionBoxRef() );   
        
           
        //pickerRef
    }
           
});
